<script setup lang='ts'>
import { onMounted, reactive, ref } from 'vue';
import { ToastSuccess, Toastloading } from '@/utils/public';
import { roleApi } from '@/api/controller';
import Pagination from '@/components/Pagination/index.vue';
import updateRole from './components/updateRole.vue';
import roleform from './components/roleform.vue';
import { ElMessageBox } from 'element-plus';
const updateRoleRef = ref();
const roleformRef = ref();
const listQuery = reactive({
  page: 1,
  limit: 10,
})
const action = reactive({
  list: [],
  total: 0,
})
const handelRoleForm = (row={}) => {
  roleformRef.value.openDialog(row)
};
const handlePermissionUpdate = (row={})=> {
  updateRoleRef.value.openDialog(row);
}
const handleDelete = (row:any={})=>{
  ElMessageBox.confirm('是否确认删除该角色', '提示',
  {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async() => {
    const loading = Toastloading();
    await roleApi.deleteRole(row.id)
    ToastSuccess('删除成功!');
    getList();
    loading.close();
  }).catch(()=>{})
}
const getList = () => {
  const loading = Toastloading();
  roleApi.getRolesList(listQuery).then(response => {
    let { data, total } = response.data
    action.list = data
    action.total = total
    loading.close();
  }).catch((err) => {
    loading.close();
  })
}
onMounted(() => {
  getList()
})
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <el-button type="primary" @click="handelRoleForm()">新增</el-button>
    </div>
    <el-table :data="action.list" border>
      <el-table-column prop="uuid" sortable="custom" align="center" label="ID">
        <template #default="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="角色" />
      <el-table-column prop="desc" align="center" label="角色描述" />
      <el-table-column prop="created_at" align="center" width="200" label="创建时间" />
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button type="primary" @click="handlePermissionUpdate(scope.row)">权限</el-button>
          <el-button type="primary" @click="handelRoleForm(scope.row)">编辑</el-button>
          <el-button v-if="scope.row.status!='deleted'" type="danger" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <updateRole ref="updateRoleRef" @upadteList="getList" />
    <roleform ref="roleformRef" @updateList="getList" />
  </div>
</template>

<style lang='scss' scoped></style>